<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>离线模式 - PWA示例</title>
    <link rel="stylesheet" href="/src/css/style.css">
</head>

<body class="offline-page">
    <div class="offline-container">
        <div class="offline-icon">
            <svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
                    fill="#666" />
                <path d="M13 7H11V13H17V11H13V7Z" fill="#666" />
            </svg>
        </div>
        <h1>无法连接到网络</h1>
        <p>您目前处于离线状态。请检查网络连接后重试。</p>
        <p>部分功能可能仍可通过缓存使用。</p>
        <button onclick="window.location.reload()">重试连接</button>
        <p class="offline-hint">上次在线时间: <span id="lastOnline">未知</span></p>
    </div>

    <script>
        // 记录上次在线时间
        if (localStorage.getItem('lastOnline')) {
            const lastOnline = new Date(parseInt(localStorage.getItem('lastOnline')));
            document.getElementById('lastOnline').textContent = lastOnline.toLocaleString();
        }

        // 监听网络恢复事件
        window.addEventListener('online', () => {
            // 网络恢复后自动刷新页面
            window.location.href = '/';
        });

        // 更新上次在线时间
        function updateLastOnline() {
            localStorage.setItem('lastOnline', Date.now().toString());
        }

        // 如果当前在线（只是加载了离线页面），更新最后在线时间
        if (navigator.onLine) {
            updateLastOnline();
        }
    </script>
</body>

</html>